<style scoped lang="stylus">

  @import "./index.styl";

</style>


<template>
  <div id="HomeIndex">
    <my-header title="晓魔女"></my-header>

    <van-pull-refresh v-model="isPullLoading" @refresh="onRefresh">
      <!--这里是内容-->
      <div class="container">

        <div class="banner">
          <van-swipe :autoplay="3000">
            <!--<van-swipe >-->
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image"/>
            </van-swipe-item>
          </van-swipe>
        </div>

        <!--瀑布流-->
        <div class="goodList">
          <van-list
            v-model="loading"
            :finished="finished"
            :offset=50
            @load="onLoad">

            <div class="waterfall">

              <div class="item" v-for="(item,index) in list" :key="index" @click="toDetail">
                <div class="item-content">
                  <div class="item-content-top">
                    <img v-lazy="item.imageUrl"/>
                  </div>

                  <div class="item-content-bottom">
                    <div class="item-content-bottom-goods-name">
                      琪琪家时尚蝴蝶结露肩两件套纱裙哦哦哦哦哦 { {{item.position}} }
                    </div>

                    <div class="item-content-bottom-goods-price-count">
                      <div class="price">
                        <span class="rmb">¥</span>
                        <span class="money">{{item.price}}</span>
                      </div>
                      <div class="count">{{item.count}}付款</div>
                    </div>
                  </div>

                </div>

              </div>

            </div>
          </van-list>

          <load-finish :isShow="finished"></load-finish>

        </div>

      </div>
    </van-pull-refresh>

  </div>
</template>

<script>

  import Header from '../../components/header/index.vue';
  import scrollFixed from '../../common/mixin/scroll-fixed';
  import LoadFinish from '../../components/loadFinish/index.vue';
  import Utils from '../../common/utils/CommonUtil';

  import {Swipe, SwipeItem, List, Cell, PullRefresh} from 'vant';

  export default {
    mixins: [scrollFixed],
    name: 'HomeIndex',

    data() {
      return {
        images: [
          'https://img.yzcdn.cn/2.jpg',
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3700885583,4162120113&fm=27&gp=0.jpg',
        ],
        list: [],
        loading: false,
        finished: false,
        count: 0,
        isPullLoading: false
      };
    },

    computed: {},

    created() {

    },

    methods: {
      onLoad() {

        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            let obj = {
              imageUrl: 'http://image.charmzenus.com/Uploads/other/2018-07-12/5b47118ecb832.jpg',
              position: this.list.length + 1,
              price: '101.00',
              count: 51
            };

            this.list.push(obj);
          }
          this.loading = false;

          if (this.list.length >= 20) {
            this.finished = true;
          }
        }, 500);
      },

      /**
       * 商品详情页
       */
      toDetail() {
        Utils.router(this.$router, '/goods/detail');
      },

      onRefresh() {
        setTimeout(() => {
          this.isPullLoading = false;
        }, 3000);
      }
    },
    components: {
      MyHeader: Header,
      VanSwipe: Swipe,
      VanSwipeItem: SwipeItem,
      VanList: List,
      VanCell: Cell,
      LoadFinish: LoadFinish,
      VanPullRefresh: PullRefresh
    }
  };
</script>

